<template>
  <div class="selection4adult" :style="{ background: `url(${imgbgc})`, 'background-size': '100% 100%' }">
    <div class="innerBox">
      <el-page-header :icon="null" @back="goBack">
        <template #title>
          <el-icon><ArrowLeftBold /></el-icon>
          <span class="returnClass">返回</span>
        </template>
        <template #content>
        </template>
      </el-page-header>
      <div class="content">
        <div v-for="(item,index) in listArr" :key="index + 'aa'" class="tipsBox">
          <el-checkbox class="pcheckbox" v-if="item.label!='社会情境'" @change="itemCheckFn($event,item)" v-model="item.checked" :label="item.label + item.notes" />
          <span v-else style="font-size: 16px;font-weight: 700;color: #606266;margin-bottom: 20px;display: inline-block;">{{item.label}}</span>
          <div class="childBox">
            <el-checkbox-group v-model="item.checkList" @change="itCheckFn($event,item)" v-if="item.label == '双人关系' || item.label == '团体关系'">
              <el-checkbox v-for="(it,idx) in item.child" :key="idx + 'bb'" :label="it.label + it.label2">
                <span>{{ it.label }}</span>
                <el-input v-show="it.isChange" :disabled="item.checkList.join(';').indexOf(it.label)>-1" v-model="it.label2" style="width:120px;margin-left:5px" placeholder="请输入" maxlength="4" minlength="2" />
              </el-checkbox>
            </el-checkbox-group>
            <div class="plusBox" v-show="(item.label == '双人关系' && doubleSelect.length<5) || (item.label == '团体关系' && familySelect.length<5)">
              <el-select v-model="item.tempSelectValue" style="width:120px;margin:0 5px 0 30px" placeholder="请选择">
                <el-option
                  v-for="tem in item.options"
                  :key="tem.value"
                  :label="tem.label"
                  :value="tem.value"
                />
              </el-select>
              <el-input v-model="item.tempInputValue" style="width:180px" placeholder="请输入" maxlength="4" minlength="2" />
              <span class="tipPlus" @click="plusFn(item)">+</span>
            </div>
            <el-checkbox-group v-model="item.checkList" :max="1" v-if="item.label == '社会情境'">
              <el-checkbox v-for="(it,idx) in item.child" :key="idx + 'cc'" :label="it.label" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="nextFn">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { serverSeckAddList } from '@/api/home.js'
export default {
  data() {
    return {
      imgbgc: require('../assets/images/pbgc.jpg'),
      personType: 'adult',
      listArr: [
        {
          label: '双人关系',
          notes: '(上限为5)',
          checked: false,
          checkList: [],
          tempSelectValue: '',
          tempInputValue: '',
          child: [
            {
              label: '父亲',
              checked: false,
              label2: ''
            },
            {
              label: '母亲',
              checked: false,
              label2: ''
            },
            {
              label: '父母',
              checked: false,
              label2: ''
            },
            {
              label: '朋友',
              checked: false,
              isChange: true,
              label2: ''
            },
            {
              label: '老师',
              checked: false,
              isChange: true,
              label2: ''
            }
          ],
          options: [
            {
              value: '父亲',
              label: '父亲',
            },
            {
              value: '母亲',
              label: '母亲',
            },
            {
              value: '兄弟姐妹',
              label: '兄弟姐妹',
            },
            {
              value: '祖父母',
              label: '祖父母',
            },
            {
              value: '外祖父母',
              label: '外祖父母',
            },
            {
              value: '情侣',
              label: '情侣',
            },
            {
              value: '朋友',
              label: '朋友',
            },
            {
              value: '同学',
              label: '同学',
            },
            {
              value: '老师',
              label: '老师',
            }
          ],
        },
        {
          label: '团体关系',
          notes: '(上限为5)',
          checked: false,
          checkList: [],
          tempSelectValue: '',
          tempInputValue: '',
          child: [
            {
              label: '家庭',
              checked: false,
              label2: ''
            },
            {
              label: '班级',
              checked: false,
              label2: ''
            }
          ],
          options: [
            {
              value: '家庭',
              label: '家庭',
            },
            {
              value: '班级',
              label: '班级',
            },
            {
              value: '宿舍',
              label: '宿舍',
            },
            {
              value: '学习小组',
              label: '学习小组',
            },
            {
              value: '社团',
              label: '社团',
            }
          ]
        },
        {
          label: '社会情境',
          notes: '',
          checked: false,
          child: [
            {
              label: '1个人物',
              checked: false
            },
            {
              label: '2个人物',
              checked: false
            },
            {
              label: '3个人物',
              checked: false
            }
          ],
          checkList: [],
        }
      ],
      selectType: 1,
      doubleSelect: [],
      familySelect: [],
      socitySelect: []
    }
  },
  methods: {
    // 全选
    itemCheckFn(e, item) {
      console.log(e, item)
      if(e) {
        if(item.child.length>5) {
          this.$message.info(item.label + item.notes)
          item.checked = !item.checked
        } else {
          item.checkList = []
          for(let i in item.child) {
            item.child[i].checked = true
            item.checkList.push(item.child[i].label+item.child[i].label2)
          }
        }
      } else {
        for(let i in item.child) {
          item.child[i].checked = false
          item.checkList = []
        }
      }
    },
    // 单选
    itCheckFn(e, item) {
      console.log(e, item)
      if(e.length>5) {
        this.$message.info(item.label + item.notes)
        item.checkList.splice(item.checkList.length-1, 1)
      } else {
        if(item.label == '双人关系') {
          this.doubleSelect = e
        }
        if(item.label == '团体关系') {
          this.familySelect = e
        }
        const checkedCount = e.length
        item.checked = checkedCount === item.child.length
      }
      
    },
    plusFn(item) {
      // 判断不能为空
      if(item.tempSelectValue!='' && item.tempInputValue!='') {
        // 判断不能重复
        for(var i in item.child) {
          if( `${item.child[i].label}${item.child[i].label2}` == `${item.tempSelectValue}${item.tempInputValue}`) {
            this.$message.info('不允许有重复！')
            return
          }
        }
        item.child.push({
          label: `${item.tempSelectValue}${item.tempInputValue}`,
          value: `${item.tempSelectValue}${item.tempInputValue}`,
          label2: ''
        })
        item.checked = false
        item.tempSelectValue = ''
        item.tempInputValue = ''
      } else {
        this.$message.info('请正确填写！')
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    nextFn() {
      // 拼接测试的类别以及个数
      let testParams = []
      let isEmpty = false
      for(let i in this.listArr) {
        if(this.listArr[i].checked==true || this.listArr[i].checkList.length > 0) {
          isEmpty = false
          break
        } else {
          isEmpty = true
        }
      }
      if(isEmpty) {
        this.$message.info('请选择测验！')
        return
      }
      var arr = ['父亲','母亲','父母','兄弟姐妹','祖父母','外祖父母','情侣','朋友','同学','老师','家庭','班级','宿舍','学习小组','社团']
      for(let i in this.listArr) {
        console.log(this.listArr[i].checkList)
        let tempArr = JSON.parse(JSON.stringify(this.listArr[i].checkList))
        console.log(tempArr)
        for(let k in tempArr) {
          // tempArr[k] : "老师222"
          // '老师'+'(' + "老师222".split('老师')[1] + ')'
          for(let kk in arr) {
            if(tempArr[k].indexOf(arr[kk])!=-1) {
              let aa = tempArr[k]
              if(aa.split(arr[kk])[1]!='') {
                tempArr[k] = arr[kk]+'(' + aa.split(arr[kk])[1] + ')'
              } else {
                tempArr[k] = arr[kk]+aa.split(arr[kk])[1]
              }
            }
          }
        }
        if(this.listArr[i].checked) {
          testParams.push({
            label:this.listArr[i].label,
            checkList: tempArr
          })
        } else {
          if(this.listArr[i].checkList.length > 0) {
            testParams.push({
              label:this.listArr[i].label,
              checkList: tempArr
            })
          }
        }
      }
      console.log(JSON.stringify(testParams))
      // 根据选择的测验分类进行不同测验跳转
      this.$router.push({
        path: testParams[0].label === '双人关系'?'/wholeTest4double':(testParams[0].label === '团体关系'?'/wholeTest4Family':'/wholeTest4Society'),
        query: {
          type: 'add',
          testType: JSON.stringify(testParams),
          selectType: this.selectType
        }
      })
    }
  },
  mounted() {
    this.personType = sessionStorage.getItem('personType')
    this.selectType = this.$route.query.selectType ? this.$route.query.selectType : 1
    if(this.personType == 'adult') {
      this.imgbgc = require('../assets/images/pbgc.jpg')
    } else {
      this.imgbgc = require('../assets/images/cbgc.jpg')
    }
  }
}
</script>

<style lang="scss" scoped>
.selection4adult {
  height: calc(100vh - 200px);
  background: url(../assets/images/pbgc.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 100px 140px;
  .innerBox {
    height: calc(100% - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
    box-shadow: 35px 35px 50px 0px 
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  .content {
    padding: 50px 60px;
    .childBox {
      .plusBox {
        display: inline-block;
        .tipPlus {
          display: inline-block;
          font-size: 18px;
          font-weight: 700;
          width: 25px;
          height: 25px;
          background: #2b82e7;
          text-align: center;
          line-height: 22px;
          border-radius: 50%;
          color: #fff;
          border: 1px solid #2b82e7;
          vertical-align: middle;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
  }
  .btn {
    text-align: center;
  }
}
</style>

<style lang="scss">
.selection4adult {
  .el-checkbox-group {
    display: inline-block;
  }
  .el-checkbox {
    margin-bottom: 20px;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #2b82e7;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner, .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #2b82e7;
    border-color: #2b82e7;
  }
  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #2b82e7;
  }
  .el-divider--vertical {
    border-left: 0;
  }
  .tipsBox {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 20px 20px 0;
    margin-bottom: 20px;
    .pcheckbox {
      .el-checkbox__label {
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
  .el-page-header__title {
    .el-icon {
      padding: 4px;
      background: #2b82e7;
      color: #fff;
      border-radius: 50%;
    }
    .returnClass {
      font-size: 16px;
      font-weight: 700;
      margin-left: 10px;
      vertical-align: text-bottom;
    }
  }
}
</style>